@import "../base"
.user-index
  width: 100%
  height: 100%

.user-sidebar
  box-shadow: 0 4px 8px rgb(77, 115, 114, 1)
  position: fixed
  top: 0
  height: 100%
  width: 12%
  background-color: #4d4d4d
  z-index: 3
  left: 0

  .sidebar-menu
    display: block
    list-style-type: none
    margin-block-start: 1em
    margin-block-end: 1em
    margin-inline-start: 0
    margin-inline-end: 0
    padding-inline-start: 15px


  .sidebar-menu-second
    li
      &:hover
        background: #56688c

      span
        display: flex
        align-items: center
        height: 50px
        width: 100%
        letter-spacing: .3px
        color: #cecece
        text-decoration: none
        padding-left: 10px
        font-size: $font_size * 0.9

      .router-link-exact-active
        color: #8ba1fa
        position: relative
        display: flex
        align-items: center
        height: 50px
        width: 100%
        letter-spacing: .3px
        text-decoration: none
        padding-left: 10px
        font-size: $font_size * 0.9

        span
          display: flex
          align-items: center
          height: 50px
          width: 100%
          letter-spacing: .3px
          color: #8ba1fa
          text-decoration: none
          padding-left: 10px
          font-size: $font_size * 0.9

        &:before
          content: '☆'
          position: absolute
          left: 0
          top: 50%
          transform: translateY(-50%)
          height: 25px
          width: 4px


.user-content
  height: 100%
  background: #545454

  .user-header
    text-align: center
    color: #ffffff
    background: #151515
    font-size: $font_size * 2

    div
      padding: 20px

  .page_header
    font-size: $font_size * 1.4
    padding: 1px
    background: #2a2a2a
    color: #7494da

  .logout
    background: #6eaac2
    float: right
    border-radius: 10px
    font-size: $font_size
    padding: 10px
    margin-top: -70px
    margin-right: 10px

    &:hover
      background: #727272

  .user-foot
    color: white
    padding: 100px 0 10px 12%
    width: 88%

  .main-content
    padding: 10px 0 100px 16%
    width: 80%
    min-height: 327px


.to_shop
  background: #2c2a2a
  color: cadetblue
  display: block
  font-size: $font_size
  padding: 32px

  &:hover
    background: #100e0e
